<template>
    <div class="container">
        <div class="top-title">课时管理</div>
        <div class="top-main">
            <div class="top-search">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="atuo" class="demo-ruleForm"
                    :size="formSize" status-icon>
                    <el-row :gutter="6">
                        <el-col :span="4">
                            <el-form-item label="课时名称" prop="name">
                                <el-input v-model="ruleForm.name" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="讲师名称" prop="lecturerName">
                                <el-input v-model="ruleForm.lecturerName" /> 
                                <!-- <el-select v-model="ruleForm.lecturerName" placeholder="请选择讲师" style="width: 100%;">
                                    <el-option v-for="item in options" :key="item.phone" :label="item.name"
                                        :value="item.name" />
                                </el-select> -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="讲师电话" prop="phone">
                                <el-input v-model="ruleForm.phone" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="课时标签" prop="identity">
                                <el-input v-model="ruleForm.identity" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-form-item>
                                <el-button type="primary" :icon="Search" style="width: 100%;"
                                    @click="searchList">搜索</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-form-item>
                                <el-button type="warning" :icon="Refresh" style="width: 100%;" @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="table-data" style="padding-top: 0.1rem;">
                <div class="table-operation" v-if="showOperation">
                    <!-- <el-button type="primary" :icon="Edit" >批量修改</el-button> -->
                    <el-button type="danger" :icon="UploadFilled" @click="deleteAll">批量删除</el-button>
                </div>
                <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="class_name" label="课时名称" />
                    <el-table-column label="课时时长">
                        <template #default="scope">
                            {{ getHour(scope.row.class_time) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="upload_name" label="上传人" />
                    <el-table-column label="课时链接">
                        <template #default="scope">
                            <el-link type="primary" @click="playVideo(scope.row.class_link)">预览视频<i
                                    class="el-icon-view el-icon--right"></i> </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="identity" label="课时标签" />
                    <el-table-column prop="upload_time" label="上传时间" />
                    <el-table-column fixed="right" label="操作" width="200">
                        <template #default="scope">
                            <el-button type="primary" :icon="Edit" @click="openDiglogOne('编辑', scope.row)">编辑</el-button>
                            <el-button type="danger" :icon="CloseBold"
                                @click="deleteOne(scope.row.class_number)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="button"  style="padding-top: 1rem;">
                <el-config-provider :locale="locale">
                    <el-pagination v-model:current-page="ruleForm.pageNum" v-model:page-size="ruleForm.pageSize"
                        :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                        :total="ruleForm.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </el-config-provider>
            </div>
        </div> 
        <div class="player-container" v-show="dialogPlayer">
            <div class="player-box">
                <div class="player-wrap">
                    <div id="coursePlay"></div>  
                </div> 
                <div class="player-close" @click="closePlay">
                   <CloseBold></CloseBold> 
                </div>
            </div> 
        </div> 
        <!-- 单条上传 -->
        <uploadDiglog :dialogVisible="showDiglog" @close-diglog="closeDiglogOne" :status="statusTitle" :courseInfo="courseInfo"></uploadDiglog>
        <!-- 多条上传 -->
        <listUploadDiglog :listDialogVisible="listShowDislog" @close-diglog="closeDiglogList"></listUploadDiglog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { Search, Refresh, CloseBold, Plus, UploadFilled, Edit } from '@element-plus/icons-vue'
import uploadDiglog from '../../components/uploadDiglog.vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import listUploadDiglog from '../../components/listUploadDiglog.vue'
import { courseList, deleteCourse, deleteCourseList } from '../../api/uploadVideoList'
import { searchTeacher } from '../../api/uploadVideo'
import { getHour } from '../../utils/date'
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css'; // 引入样式
const locale = ref(zhCn);
interface RuleForm {
    name: string
    lecturerName: string
    phone: string
    pageNum: number,
    pageSize: number,
    total: number,
    identity: string,
    data_id: string
}
interface User {
    class_name: string | null
    class_time: string | null
    class_teacher: string | null,
    teacher_phone: string | null,
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
let options: any = ref([])
const ruleForm = reactive<RuleForm>({
    name: '',
    lecturerName: '',
    phone: '',
    pageNum: 1,
    pageSize: 10,
    total: 0,
    data_id: "",
    identity: ''
})
let tableData: any = ref([])
const rules = reactive<FormRules<RuleForm>>({

})

//初始化
const getCourse = () => {
    let params = {
        class_name: ruleForm.name,
        class_teacher: ruleForm.lecturerName,
        teacher_phone: ruleForm.phone,
        pageNum: ruleForm.pageNum,
        pageSize: ruleForm.pageSize,
        data_id: ruleForm.data_id,
        identity: ruleForm.identity
    }
    courseList(params).then((res: any) => {
        if (res.code === '200') {
            tableData.value = res.data.list || []
            ruleForm.total = res.data.total
        } else {
            tableData.value = []
        }
    })
}
const getTeacherList = () => {
    searchTeacher({ name: '', phone: '' }).then(res => {
        if (res) {
            console.log(res)
            options.value = res.list || []
        }
    })
}

var coursePlayer: any = null
const dialogPlayer = ref(false)
const playVideo = (url: string) => {
    dialogPlayer.value = true
    coursePlayer.src = url
    coursePlayer.play()
}
const closePlay = () => {
    dialogPlayer.value = false
    coursePlayer.pause()
}
onMounted(() => {
    getTeacherList()
    getCourse()
    coursePlayer = new Player({
        id: 'coursePlay',
        autoplay: true, // 是否自动播放
        width: 700, // 播放器宽度
        height: 400, // 播放器高度 
        playbackRate: [0.5, 0.75, 1, 1.5, 2] // 播放速度选项
    });
})
//编辑
const showDiglog = ref(false)
const statusTitle = ref('单条上传')
const courseInfo = ref({})
const openDiglogOne = (status: string, item: any) => {
    courseInfo.value = JSON.parse(JSON.stringify(item))
    console.log(courseInfo.value)
    statusTitle.value = status
    showDiglog.value = true
}
const closeDiglogOne = () => {
    showDiglog.value = false
    getCourse()
}

//多条上传
const listShowDislog = ref(false)
const openDiglogList = () => {
    listShowDislog.value = true
}
const closeDiglogList = () => {
    listShowDislog.value = false
    getCourse()
}


//删除课时(单个)
const deleteOne = (id: string) => {
    let data: any = localStorage.getItem('token')
    let { teacher_name, phone } = JSON.parse(data)
    let params = {
        class_number: id,
        updateUserName: teacher_name,
        updateUsserPhone: phone
    }

    deleteCourse(params).then(res => {
        if (res.code === '200') {
            ElMessage.success('删除成功')
            getCourse()
        } else {
            ElMessage.error(res.msg)
        }
    })
}
const showOperation = ref(false)
//多选 
const handleSelectionChange = (val: any) => {
    idList.value = val
    showOperation.value = val.length > 0 ? true : false
}
interface Course {
    class_number: string;
    // 其他属性可以根据实际需求添加
}
const idList = ref<Course[]>([]);
//批量删除
const deleteAll = () => {
    if (idList.value.length === 0) {
        ElMessage.error('请选择课时')
        return
    }
    let data: any = localStorage.getItem('token')
    let { teacher_name, phone } = JSON.parse(data)
    let params = {
        ids: idList.value.map(item => item.class_number).join(','),
        updateUserName: teacher_name,
        updateUsserPhone: phone
    }
    deleteCourseList(params).then(res => {
        if (res.code === '200') {
            ElMessage.success('删除成功')
            getCourse()
        } else {
            ElMessage.error(res.msg)
        }
    })
}

//改变每页多少条
const handleSizeChange = (val: number) => {
    ruleForm.pageSize = val
    getCourse()
}
//点击第几页
const handleCurrentChange = (val: number) => {
    ruleForm.pageNum = val
    getCourse()
}
//搜索
const searchList = () => {
    getCourse()
}
//重置 
const reset = () => {
    ruleForm.name = ''
    ruleForm.lecturerName = ''
    ruleForm.phone = ''
    ruleForm.pageNum = 1
    ruleForm.pageSize = 10
    ruleForm.data_id = ''
    getCourse()
}
</script>

<style lang="scss" scoped>
.top-title {
    height: 100px;
    line-height: 100px;
    background-color: #ffffff;
    padding-left: 20px;
}

.top-main {
    box-sizing: border-box;
    margin: 20px;
    height: calc(100vh - 140px);
    background-color: #ffffff;
    padding: 20px;
    box-sizing: border-box
}
.player-container{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0 ;
    left: 0;
    z-index: 6;
    // display: none; 
    background: rgba($color: #000000, $alpha:0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    .player-box{
        width: 700px;
        height: 400px;   
        padding: 30px;
        border-radius: 20px;
        background-color: #ffffff;
        position: relative;
        .player-wrap{   
            box-sizing: border-box; 
        }
        .player-close{ 
                width: 20px;
                height: 20px;
                position: absolute;
                top: 10px;
                right: 10px;
                cursor: pointer;
                z-index: 9;
            }
    }
    
}
</style>